<div>
        <navbar sub-bar="true"/>
        <!-- PAGE CONTENT -->
        <div class="container-fluid min-height-for-footer py-5 px-lg-6 px-4">
            <div class="row justify-content-around">
            <form class="col-12 col-lg-6 mb-5" v-if="nextStep == 0" 
                @submit.prevent="resetPassword" method="post">
                <h4 class="text-left">
                    <span class="text-green">FORGOTTEN</span> YOUR PASSWORD?
                </h4>
                <p class="">Please enter your email and we'll send you a link to create a new password.</p>
                <div v-if="responseMessage != null && responseMessage != ''" class="alert alert-warning" role="alert">
                    {{responseMessage}}
                </div>
                <div class="form-group row">
                    <label for="" class="col-form-label col-sm-2 col-lg-2 text-left">
                        Email
                    </label>
                    <div class="col-sm-8 col-lg-8">
                        <input v-model="data.username" type="email" class="form-control">
                    </div>
                </div>
                <button class="btn btn-info btn-login offset-sm-2 btn-block col-sm-8 col-lg-8" type="submit">
                    Send Email
                </button>
            </form>
            <div class="col-12 col-lg-6 mb-5" v-if="nextStep == 1">
                <h4 class="text-left">
                    <span class="text-green">CHECK</span> YOUR EMAIL
                </h4>
                <p class="">We've sent an email to {{data.username}} with instructions on how to create a new password.</p>
                <!-- <p class="next-step text-info pointer" @click="nextStep = '2'">Click here to go to the next step.</p> -->
            </div>
            <form class="col-12 col-lg-6 mb-5" v-if="nextStep == 2"
                @submit.prevent="changePassword" method="post">
                <h4 class="text-left">
                    CREATE A <span class="text-glight">NEW</span> PASSWORD
                </h4>
                <p class="">Enter your new password for {{data.username}}
                </p>
                <div v-if="responseMessage != null && responseMessage != ''" class="alert alert-primary" role="alert">
                    {{responseMessage}}
                </div>
                <div class="form-group row">
                    <label for="username" class=" col-form-label col-lg-4 col-sm-12 text-left">
                        Email
                    </label>
                    <div class="col-lg-8 col-sm-12">
                        <input id="username" v-model="data.username" type="text" class="form-control" required disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="oldPassword" class=" col-form-label col-lg-4 col-sm-12 text-left">
                        Reset Password
                    </label>
                    <div class="col-lg-8 col-sm-12">
                        <input id="oldPassword" v-model="passwordInfo.oldPassword" type="password" class="form-control" 
                            required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="newPassword" class=" col-form-label col-lg-4 col-sm-12 text-left">
                        New Password
                    </label>
                    <div class="col-lg-8 col-sm-12">
                        <input id="newPassword" v-model="passwordInfo.newPassword" type="password" class="form-control"
                            required>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="newPasswordV" class=" col-form-label col-lg-4 col-sm-12 text-left">
                        New Password Verify
                    </label>
                    <div class="col-lg-8 col-sm-12">
                        <input id="newPasswordV" v-model="passwordInfo.newPasswordVerify" type="password" 
                            class="form-control" required>
                    </div>
                </div>
                <button class="btn btn-info btn-login offset-lg-4 btn-block col-sm-12 col-lg-8" type="submit">
                    Change Password and Sign In
                </button>
            </form>
            <div class="col-12 col-lg-4 text-center align-self-center">
                <p class="">
                    Or go back and                
                    <router-link :to="'/login'" tag="a" class="text-blue">  
                        sign in.
                    </router-link>
                    <br>
                    <span v-if="nextStep == 2">without changing password.</span>
                </p>
            </div>
        </div>
    </div>
    <footer-page class="footer-relative" :infoLink="false" />
</div>
